<template>
  <view class="time-box">
    <view class="time-text">距离截止</view>
    <view class="time">{{d}}</view>天
    <view class="time">{{h}}</view>时
    <view class="time">{{m}}</view>分
    <view class="time">{{s}}</view>秒
  </view>
</template>

<script>
  export default {
    name: "countdown",
    props: {
      remainTime: {    // 倒计时间总秒数
	     type: String,
		   default: ''
	    }
    },
    data() {
      return {
        d: '00',
        h: '00',
        m: '00',
        s: '00'
      }
    },
    mounted() {
      // 倒计时
      this.timer();
    },
    methods: {
      addZero(i) {
        return i < 10 ? "0" + i: i + "";
      },
      // 倒计时
      timer() {
        var _this = this;
        var time = window.setInterval(function() {
          var nowtime = new Date();
          var endtime = new Date(_this.remainTime+",00:00:00");
          var lefttime = parseInt((endtime.getTime() - nowtime.getTime()) / 1000);
          var d = parseInt(lefttime / (24*60*60))
          var h = parseInt(lefttime / (60 * 60) % 24);
          var m = parseInt(lefttime / 60 % 60);
          var s = parseInt(lefttime % 60);
          if(lefttime <= 0){
            window.clearInterval(time);
            return;
          }
          _this.d = _this.addZero(d)
          _this.h = _this.addZero(h);
          _this.m = _this.addZero(m);
          _this.s = _this.addZero(s);
        }, 1000);
      },
    }
  }
</script>
<style lang="scss" scoped>
	.time-box {
		display: flex;
		align-items: center;
		font-size: 32rpx;
		font-weight: bold;
	}
	.time-text {
		font-size: 32rpx;
	}
	.time {
		color: red;
	}
</style>
